import React from 'react';
import { Flex, Layout } from 'antd';
// 引入头部
import DragDropHeader from './../pages/Home/components/design/dragDropHeader'
import DragDropBoxLeft from './../pages/Home/components/design/dragDropBox_left'
import DragDropBoxCenter from './../pages/Home/components/design/dragDropBox_center'
import DragDropBoxRight from './../pages/Home/components/design/dragDropBox_right'
const { Header, Content } = Layout;
function DragDrop() {
  const layoutStyle = {
    borderRadius: 8,
    overflow: 'hidden',
    width: '100%',
    maxWidth: '100%',
    height: '100vh',
    background:'#fff',
  };
  const headerStyle: React.CSSProperties = {
    color: '#1f1f1f',
    height: 64,
    backgroundColor: '#fff',
    alignContent: 'center',
    boxShadow: '2px 2px 5px rgba(0, 0, 0, 0.1)', /* 添加阴影 */
  };

  const contentStyle: React.CSSProperties = {
    textAlign: 'center',
    minHeight: '100%',
    lineHeight: '100%',
    color: '#1f1f1f',
  };


  return (
    <div>
      <Flex gap="middle" wrap="wrap">
        <Layout style={layoutStyle}>
          <Header style={headerStyle}>
            <DragDropHeader />
          </Header>
          <Content style={contentStyle}>
            <div className='dragDropBox'>
              <div className="dragDropBox_left">
                <DragDropBoxLeft />
              </div>
              <div className="dragDropBox_center">
                <DragDropBoxCenter />
              </div>
              <div className="dragDropBox_right">
                <DragDropBoxRight />
              </div>
            </div>
          </Content>
        </Layout>
      </Flex>
    </div>
  )
}

export default DragDrop
